<!--
 * @Author: hifishroom
 * @Date: 2021-08-26 14:09:45
 * @LastEditTime: 2021-09-06 19:15:35
 * @FilePath: \backstage\src\views\background\childsContent\account\Admin.vue
-->
<template>
  <div>
    <el-table :data="list" border style="width: 100%">
      <el-table-column fixed prop="id" label="ID" width="100%">
      </el-table-column>
      <el-table-column prop="username" label="姓名" width="100%">
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="80%">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            {{ scope.row.sex | sexCheck }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="birthday" label="生日" width="150%">
      </el-table-column>
      <el-table-column prop="phone" label="手机" width="150%">
      </el-table-column>
      <el-table-column prop="affiliation" label="地址" width="200%">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200%">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            {{ scope.row.createTime | createTimeCheck }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="150%">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="270%">
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.status | statusCheck"
            active-text="启用"
            inactive-text="停用"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180%">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(scope.$index, list)"
            >移除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="len">
    </el-pagination>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "Admin",
  data() {
    return {
      page: 1,
      flag: false
    };
  },
  mounted() {
    this.getUserList(this.page);
  },
  methods: {
    ...mapActions(["getUserList"]),
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    isFlag(e) {
      console.log(e);
    }
  },
  computed: {
    list() {
      return this.$store.state.userList;
    },
    len() {
      return this.$store.state.DictionaryItemLen;
    }
  },
  filters: {
    sexCheck: function(val) {
      if (val == 1) {
        return "男";
      } else if (val == 2) {
        return "女";
      } else {
        return "保密";
      }
    },
    createTimeCheck: function(val) {
      val = val.toString();
      let date = val.slice(0, 9);
      let time = val.slice(8);
      let temp = date.slice(0, 4);
      let m = date.slice(4, 6);
      let d = date.slice(6, 8);
      let h = time.slice(0, 2);
      let mm = time.slice(2, 4);
      let s = time.slice(4, 6);
      return temp + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s;
    },
    statusCheck: function(val) {
      if (val == 1) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>
